<template>
    <div  id="card">
        <div class="preview-top">
            <div class="preview-top1">
                <div class="preview-top-content">
                    <div class="clearfix">
                        <div class="fl">
                            <span style="display:inline-block; overflow:hidden;" class="preview-title" v-text="courseName"></span>
                            <span style="display:inline-block; overflow:hidden;" class="preview-line">/</span>
                            <span :title="chapterName" class="beyond-hiding" style="display:inline-block;width:450px;" v-text="chapterName"></span>
                        </div>
<!-- 王天宇 星级评分 html-->
                        <div class="vmm-star-box fl" v-show="starValue">
                            实验难度：
                            <el-rate disabled disabled-void-color="#545c77" :colors="starColors" v-model="starValue"></el-rate>
                        </div>
<!-- 王天宇 星级评分 html end-->
                    </div>
                </div>
            </div>
        </div>
        <div id="jx-contain" >
            <!-- <iframe :width="wid" :height="hei" allowfullscreen="true" allowtransparency="true" class="coursewareBox" src="../../../../static/generic/web/viewer.html?file=./../../../static/123.pdf" frameborder="0"></iframe> -->
            <div class="sideBox">
                <ul v-if="roles == 'STUDENT'">
                    <li @click="detalList" v-if="_btn_flag == undefined"><i class="iconfont icon-liebiao" title="详情" style="font-size:24px"></i>列表</li>
                    <li @click="videoDialog" v-if="videoUrlCopy != '' && stepTypeStr != '多步骤实验'"><i class="iconfont icon-shipin1"></i>视频</li>
                    <!-- <li class="sideBoxActive" v-else><i class="iconfont icon-shipin1"></i>视频</li> -->
                    <li @click="openNoteWindow" v-if="experimentreport != '' || displayVersion != ''"><i class="iconfont icon-ico_compile_thick"></i>笔记</li>
                    <li class="sideBoxActive" v-else><i class="iconfont icon-ico_compile_thick"></i>笔记</li>
                </ul>
                 <ul v-if="roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER'">
                    <li @click="detalList" v-if="_btn_flag == undefined"><i class="iconfont icon-liebiao" title="详情" style="font-size:24px"></i>列表</li>
                    <li @click="videoDialog" v-if="videoUrlCopy != '' && stepTypeStr != '多步骤实验'"><i class="iconfont icon-shipin1"></i>视频</li>
                    <!-- <li class="sideBoxActive" v-else><i class="iconfont icon-shipin1"></i>视频</li> -->
                    <li @click="openNoteWindow" v-if="experimentreport != '' || displayVersion != ''"><i class="iconfont icon-ico_compile_thick"></i>批注</li>
                    <li class="sideBoxActive" v-else><i class="iconfont icon-ico_compile_thick"></i>批注</li>
                </ul>
            </div>
<!-- 王天宇 实验报告 HTML -->
            <div class="sideBox sideBox2" v-if="roles == 'STUDENT'">
                <div>
                    <!-- 实验报告弹窗 -->
                    <div v-show="dialogReport" class="vir-report">
                        <div class="vir-report-header">
                            <span>文件报告</span>
                            <span class="model-download" @click="downloadModel">实验报告模板下载
                                <i class="iconfont icon-tubiaozhizuo-"></i>
                            </span>
                            <button @click="dialogReport = false" type="button" class="el-dialog__headerbtn"><i class="el-dialog__close el-icon el-icon-close"></i></button>
                        </div>
                        <div class="vir-report-main">
                            <div v-if="ReportUploadForm.isUpload" style="margin-bottom:20px;">
                                <img src="../../../assets/images/upload-success.png" />
                            </div>
                            <div style="padding:0px 0 20px;" v-if="ReportUploadForm.isUpload">{{ resQuestionData.reportFileName }}</div>
                            <div class="button-style" @click="dialogUpload = true">上传实验报告</div>
                        </div>
                    </div>
                    <!-- 在线实验报告弹窗 -->
                    <div v-show="dialogReportLine" class="vir-reportline" :class="{'line-full-box':isLineFull}">
                        <div class="vir-reportline-header">
                            <span>在线报告</span>
                            <div class="line-full">
                                <i @click="fullLine(1)" v-if="!isLineFull" class="iconfont icon-full-screen" title="放大"></i>
                                <i @click="fullLine(2)" v-else class="iconfont icon-suoxiao" title="恢复窗口"></i>
                            </div>
                            <button @click="dialogReportLine = false" type="button" class="el-dialog__headerbtn"><i class="el-dialog__close el-icon el-icon-close"></i></button>
                        </div>
                        <div class="vir-reportline-main">
                            <mavonEditor ref="reportline"></mavonEditor>
                        </div>
                        <div class="vir-reportline-footer">
                            <div class="btn-group">
                                <!-- 临时保存置灰 -->
                                <el-button v-if="!onlineCommit" :disabled="onlineCommit" class="button-style" @click="ReportNoteSave(1,0)">保存</el-button>&nbsp;&nbsp;&nbsp;
                                <button class="button-style" @click="ReportNoteSave(1,1)">提交</button>
                            </div>
                        </div>
                    </div>
                </div>
                <ul v-if="classId">
                    <li style="line-height:18px;" @click="dialogReport = !dialogReport; dialogReportLine = false;"><i class="iconfont icon-liebiao" title="详情" style="font-size:24px"></i>文件报告</li>
                    <li style="line-height:18px; margin-top:50px;" @click="dialogReportLine = !dialogReportLine; dialogReport = false;"><i class="iconfont icon-ico_compile_thick"></i>在线报告</li>
                </ul>
            </div>
<!-- 王天宇 实验报告 HTML end -->

            <div v-if="stepTypeStr !=='多步骤实验'">
                <!-- <iframe :width="wid" :height="hei" allowfullscreen="true" allowtransparency="true" :src="displayVersion" frameborder="0"></iframe> -->
                   <!-- <div class="jx-content" v-if="laboratoryTarget != ''" > <div class="markdown-body" v-html="laboratoryTarget" ></div></div>
                   <div class="jx-content" v-if="displayVersion"> <div class="markdown-body" v-html="displayVersion"></div></div> -->
                <div class="jx-content" v-if="laboratoryTarget != '' ||  displayVersion">
                        <div class="markdown-body" v-html="laboratoryTarget" ></div>
                        <div class="markdown-body" v-html="displayVersion"></div>
                </div>
                <div class="no-data-tips" v-if="!displayVersion &&  laboratoryTarget ==''">
                    <img src="./../../../assets/images/index_no_data.png" />
                    <p>暂无内容</p>
                </div>
            </div>
            <div v-if="stepTypeStr =='多步骤实验'">
                <div class="manySteep" v-if="stepList.length>0">
                   <div class="manySteep-center">
                        <div class="manySteep-left">
                            <i class="iconfont icon-gengduo" @click="showFn"></i>
                            <span class="titlesteep" v-if=' stepList.length>0' :title="stepList.length>0 ?stepList[stepListIndex].name  : ''">{{stepListIndex +1}}、{{stepList.length>0 ?stepList[stepListIndex].name  : ''}}</span>
                        </div>
                        <div class="manySteep-right">
                            <span class="prevpage button-style"   v-if="stepListIndex > 0" @click="page(-1)" >上一步</span>
                            <span class="nextvpage button-style" v-if="stepList.length > 1" @click="page(1)">下一步</span>
                        </div>
                   </div>
                </div>
                <div class="maskleft"  @click="closeFn"> </div>
                <ul class="maskleft-ul" id="spaceHeight">
                    <li v-for="(item , index) in stepList" :key="index"  :class="{ activeSteep : stepListIndex == index}">{{ index+1 }}、{{ item.name }}</li>
                </ul>

                <div class="jx-content" v-show="experimentVideoData2 || experimentreport || (expeimenttarget && stepListIndex ==0)">
                    <!-- 视频 -->
                    <div v-show="experimentVideoData2">
                        <video
                            ref="videoStep"
                            id="videoStep"
                            class="video-js vjs-default-skin vjs-big-play-centered"
                            controls
                            style="object-fit:fill"
                        >
                            <!-- <source  :src="experimentVideoData2" > -->
                        </video>
                    </div>
                    <!-- 目标 -->
                    <div class="markdown-body" v-html="expeimenttarget"  v-show="expeimenttarget && stepListIndex ==0" ></div>
                    <!-- 手册 -->
                    <div class="markdown-body aa" v-html="experimentreport" ></div>

                </div>
                <div class="no-data-tips" v-if="!experimentVideoData2  && ( !expeimenttarget || stepListIndex !=0 ) && !experimentreport">
                    <img src="./../../../assets/images/index_no_data.png" />
                    <p>暂无内容</p>
                </div>
            </div>
        </div>
        <!-- 视频盒子 -->
        <el-dialog
            title="视频"
            :visible.sync="dialogVisible2"
            width="40%"
            :close-on-click-modal="false"
            @close='closeVideoDialog'
            >
            <!-- <video id="video"  autoplay controls class="videoShow" disablePictureInPicture  controlslist="nodownload" :src="videoUrl" ></video> -->
             <video id="video"   class="video-js vjs-default-skin vjs-big-play-centered" controls  preload="auto" data-setup='{}' width="100%" height="346"  style="object-fit:fill" >
                <source  :src="videoUrl" >
            </video>
        </el-dialog>
        <!-- 教师笔记盒子 -->
        <div class="el-dialog__wrapper NotesBox el-annotation" id="onlyDialog" v-if="roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER'">
            <div role="dialog" aria-modal="true" aria-label="批注" class="el-dialog" style="margin-top: 15vh; width: 490px;">
                <div class="el-dialog__header">
                    <span class="el-dialog__title">批注</span>
                    <button type="button" aria-label="Close" class="el-dialog__headerbtn"><i  @click="closeNoteWindow" class="el-dialog__close el-icon el-icon-close"></i></button>
                </div>
                <div class="el-dialog__body">
                    <el-input id="noteVal" type="textarea" v-model="noteVal" style="width: 450px; height: 200px;"></el-input>
                    <!-- <textarea id="noteVal" v-model="noteVal" style="width: 450px; height: 200px;"></textarea> -->
                    <!-- <mavonEditor ref="question" class="questionNote"></mavonEditor> -->
                </div>
                <div class="el-dialog__footer">
                    <span  class="dialog-footer">
                        <button @click="NoteSave" class="button-style saveNote">保存</button>
                        <button @click="clearContent" class="button-style clear" :class="{ active: noteVal.length > 0 }" style="margin-left:6px;">清除</button>
                    </span>
                </div>
            </div>
        </div>
        <!-- 学生笔记盒子 -->
        <div class="el-dialog__wrapper el-notes" id="onlyDialog" v-if="roles == 'STUDENT'" >
            <div role="dialog" aria-modal="true" aria-label="笔记" class="el-dialog" style="margin-top: 15vh; width: 490px;">
                <div class="el-dialog__header">
                    <span class="el-dialog__title">笔记</span>
                    <button type="button" aria-label="Close" class="el-dialog__headerbtn"><i  @click="closeNoteWindow" class="el-dialog__close el-icon el-icon-close"></i></button>
                </div>
                <div class="el-dialog__body">
                    <el-input id="noteVal" type="textarea" v-model="noteVal" style="width: 450px; height: 200px;"></el-input>
                     <!-- <textarea id="noteVal" v-model="noteVal" style="width: 450px; height: 200px;"></textarea> -->
                    <!-- <mavonEditor ref="question" class="questionNote"></mavonEditor> -->
                </div>
                <div class="el-dialog__footer">
                    <span  class="dialog-footer">
                        <button @click="NoteSave" class="button-style saveNote">保存</button>
                        <button @click="clearContent" class="button-style clear" :class="{ active: noteVal.length > 0 }" style="margin-left:6px;">清除</button>
                    </span>
                </div>
            </div>
        </div>
        <!-- 专科版本添加详情盒子 -->
        <div class="detailBox blocks">
            <div class="chapterList-top">
                <p class="fl">章节列表</p>
                <div class="fr"><i class="iconfont icon-Group-" @click="deleteFns"></i></div>
            </div>
            <el-collapse  accordion v-model="activeName"  @change="handleChange">
                <div v-for="(item,index) in appList"  :key="index" >
                    <el-collapse-item v-if="item.levels == 3" :name='index' :disabled = item.locked>
                        <template slot="title">
                            <div :class="item.locked? 'collapsTitle2' : 'collapsTitle' " >
                                <i class="iconfont icon-chaibaoguoqujian" v-if="openFlag == String(index) "></i>
                                <i class="iconfont icon-baoguofahuo" v-else></i>
                                <span class="collapsTitle_span"> 单元{{index+1}}&nbsp;{{item.name}}</span>
                                  <i class="iconfont icon-lock"  v-if="item.locked"></i>
                            </div>
                        </template>
                        <div v-if="item.children.length > 0">
                            <div v-for="(items,indexs) in item.children"  :key="indexs" >
                                <div :class="items.locked? 'courseName2' : 'courseName' " >
                                    {{indexs+1}}&nbsp;{{items.name}}&nbsp;
                                    <i class="iconfont icon-diannao-copy" v-if="items.type == 2 || items.type == 3" style="vertical-align:baseline"></i>
                                    <i class="iconfont icon-tubiaozhizuomoban1"  v-if="items.type == 4"></i>
                                    <i class="iconfont icon-lock"  v-if="items.locked"></i>
                                </div>
                                 <!-- 多加数据为空 -->
                                <div v-if="items.otherInfo.length <=0 ">
                                    <span style="padding-left:28px; color:rgb(66, 66, 66)">暂无数据</span>
                                </div>
                                <div v-else class="detailbox" v-for="(item3,index3) in items.otherInfo"  :key="index3" @click="EnteDetails(item3,item,items)" >
                                    <div v-show="!items.locked">
                                        <div class="infoName" :class="item3.type == 5 && item3.id == ChapterId? 'studying':''">
                                            <i class="iconfont icon-42" v-if="!item3.show " style="color:#424242"></i>
                                            <span class="crile" :class="item3.type == 5 && item3.id == ChapterId? 'crileBg':''" v-else></span>
                                            <span class="Tiltlefiles" v-if="item3.show">{{item3.name}}</span><i class="iconfont icon-diannao-copy" v-if="item3.experimentCourseFlag && item3.name != '实验学习'"></i>
                                            <span class="Tiltlefiles" v-if="!item3.show " style="color:#424242">{{item3.name}}</span>
                                        </div>
                                        <div class="fr studying" v-if="item3.type == 5 && item3.id == ChapterId">正在学<i class="iconfont icon-shijian00"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div v-else>
                            暂无数据
                        </div>
                    </el-collapse-item>
                    <el-collapse-item  v-if="item.levels == 2" :name='index' :disabled = item.locked>
                        <template slot="title">
                            <div :class="item.locked? 'collapsTitle2' : 'collapsTitle' " >
                                <i class="iconfont icon-chaibaoguoqujian" v-if="openFlag == String(index) "></i>
                                <i class="iconfont icon-baoguofahuo" v-else></i>
                                <span class="collapsTitle_span">章节{{index+1}}&nbsp;{{item.name}}&nbsp;</span>
                                <i class="iconfont icon-diannao-copy" v-if="item.type == 2 || item.type == 3" style="vertical-align:baseline"></i>
                                <i class="iconfont icon-tubiaozhizuomoban1"  v-if="item.type == 4"></i>
                                 <i class="iconfont icon-lock"  v-if="item.locked"></i>
                             </div>
                        </template>
                        <div v-if="item.otherInfo.length > 0">
                            <div class="detailbox" v-for='(item2,index4) in item.otherInfo' :key="index4" @click="EnteDetails(item2,item)" >
                                <div class="infoName" :class="item2.type == 5 && item2.id == ChapterId? 'studying':''">
                                    <i class="iconfont icon-42" v-if="!item2.show " style="color:#424242" ></i>
                                    <span class="crile" :class="item2.type == 5 && item2.id == ChapterId? 'crileBg':''" v-else></span>
                                    <span class="Tiltlefiles" v-if="item2.show">{{item2.name}}</span><i class="iconfont icon-diannao-copy" v-if="item2.experimentCourseFlag && item2.name != '实验学习'"></i>
                                    <span class="Tiltlefiles" v-if="!item2.show " style="color:#424242">{{item2.name}}</span>
                                </div>
                                <div class="fr studying" v-if="item2.type == 5 && item2.id == ChapterId" >正在学<i class="iconfont icon-shijian00"></i></div>
                            </div>
                        </div>
                        <div v-else style="padding-left:25px;">
                            暂无数据
                        </div>
                    </el-collapse-item>
                </div>
            </el-collapse>
        </div>
        <!-- 专科版本弹窗 -->
        <el-dialog :close-on-click-modal="false" class="dialog-virtual dialogList" title="提示" :visible.sync="dialogVirtual" width="460px">
            <div class="dialog-content">
                <i class="iconfont icon-tishi"></i>
                <p>有其它实验正在进行中，是否停止它进入该实验?</p>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="dialogVirtual = false">取 消</el-button>
                <el-button class="button-style" @click="VirtualSave">确 定</el-button>
            </span>
        </el-dialog>
<!-- 王天宇 实验报告  -->

        <!-- 实验报告文件上传 -->
        <el-dialog :close-on-click-modal="false" class="upload-dialog" title="上传实验报告" :visible.sync="dialogUpload" width="460px" @close="ReportUploadClose">
            <el-form :model="ReportUploadForm" :rules="ReportUploadRules" ref="ReportUploadForm" label-width="100px">
                <el-form-item label="文件上传 :" prop="versionFile" class="version-file">
                    <el-button class="button-style">上传文件<input id="report-file-upload" type="file" multiple="multiple" auto-complete="off" @change="getReportFile"></input></el-button>
                    <p style="margin-top:10px; line-height:24px;" v-if="ReportUploadForm.versionFile.length>0">已选: {{ReportUploadForm.versionFile}}</p>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align:center;">
                <el-button class="button-style" @click="ReportUploadSave('ReportUploadForm')">保存</el-button>
            </div>
        </el-dialog>
        <el-dialog
            class="bigger-dialog"
            :visible.sync="bigger"
            >
            <img :src="biggerImgPath">
        </el-dialog>
<!-- 王天宇 实验报告 end -->
    </div>
</template>
<script>
    import videojs from 'video.js'   //视频
    import mavonEditor from "../../../components/mavonEditor";
    import { steep } from "@/api/Virtual";
    export default{
        components: { mavonEditor },
        data(){
            return {
                //临时保存置灰
                onlineCommit:true,
// 王天宇 星级评分 data
                starValue:0,
                starColors:['#c0c4cc', '#c0c4cc', '#c0c4cc '],
// 王天宇 星级评分 data end
//
                //在线是否全屏
                isLineFull:false,
                //markdown工具栏
                toolbarsMav: {
                    bold: true, // 粗体
                    italic: false, // 斜体
                    header: true, // 标题
                    //underline: true, // 下划线
                    //strikethrough: true, // 中划线
                    //mark: true, // 标记
                    //superscript: true, // 上角标
                    //subscript: true, // 下角标
                    quote: true, // 引用
                    ol: true, // 有序列表
                    ul: true, // 无序列表
                    imagelink: true, // 图片链接
                    code: true, // code
                    table: true, // 表格
                    help: true, // 帮助
                    alignleft: true, // 左对齐
                    aligncenter: true, // 居中
                    alignright: true, // 右对齐
                    preview: true, // 预览
                    //fullscreen: true    // 全屏编辑
                },
                //实验报告弹窗
                dialogReport:false,
                //在线报告弹窗
                dialogReportLine:false,
                //获取实验报告数据
                resQuestionData:'',
                // 实验报告上传弹窗
                dialogUpload: false,
                ReportUploadRules: {
                    versionFile: [
                        { required: true, message: '请上传文件', trigger: 'blur' }
					]
                },
                // 实验报告上传
                ReportUploadForm: {
                    fileName: '',
                    versionFile: '',
                    isUpload: false
                },
                //
                displayVersion: '',
                // 目标
                laboratoryTarget: '',
                wid:0,
                hei:0,
                // 视频地址
                videoUrl:'',
                // 视频地址防关闭
                videoUrlCopy:'',
                dialogVisible1: false,
                // 视频显示隐藏
                dialogVisible2: false,
                // 学习笔记值
                noteVal:'',
                // 课程名称
                courseName: '',
                // 章节名称
                chapterName: '',
                //身份获取
                roles:'',

                //专科版本
                activeName:'',
                //专科数据
                appList:[],
                //是否添加过班级
                userStatus:'',
                //跳转值
                typesStatus:'',
                //占用弹窗
                dialogVirtual:false,
                //判断是从技术库
                _btn_flag:'',
                 //存储点击的那个章节id
                clickId:'',
                //详情列表控制值
                openFlag:'',

                //班级Id
                classId:'',

                //是否是多任务
                stepTypeStr:'',
                steepList:[],


                singleTask:'',
                myVideo:'',


                 // 图片放大
                biggerImgPath: '',
                bigger: false,

                //步骤字段
                stepListIndex:0,
                stepList:[],
                // 视频
                experimentVideoData2:'',
                //目标
                expeimenttarget:'',
                //手册
                experimentreport:'',
                //视频
                myVideo2:'',
                //视频统计
                videoAll:'',
                videocurrentTime:'',

                videostatus:'',
                //章节id
                single:'',
                //向后台发送数据
                websock2:'',

                //单步骤
                myVideo3:'',
                //over:''

            }
        },

        created () {
            let self = this
            //班级Id
            self.classId = self.$route.query.classId
            // 从状态管理获取roles
            self.roles = self.$store.state.user.roles[0]
            // 课程ID
            self.courseId = self.$route.query.courseId
            // 章节ID（变成任务id）
            self.ChapterId = self.$route.query.chapterId

            //章节
            self.single = self.$route.query.singleChaper

            //是否是多任务
            self.stepTypeStr = self.$route.query.stepTypeStr
            //专科版本
            //如果是从何技术库来的，则隐藏列表
            self._btn_flag = self.$route.query._btn_flag
            // 初始化获取资源
            self.InitGetResource()
            // 初始化头部信息
            self.InitHeaderInfo()
            //初始化详情数据
            self.DetailData()
            //专科版本
            //初始化班级
            self.ClassInit()


             //yx 添加分辨率判断
            self.$nextTick(()=>{
                if(window.screen.height <= 900){
                    //console.log(window.screen.height,147)
                    $('.blocks').css('max-height','520px')
                    $('.detailBox').css('max-height','520px')
                    $('.blocks').css('right','110px')
                }
            })

            //获取步骤
            if(this.stepTypeStr =='多步骤实验'){
                this.getlist()
            }
            if(this.roles == 'STUDENT' ){
                this.onmessages()
            }

// 王天宇 星级评分 created
            //获取评分
            self.getStar();
            //学生身份视频统计

// 王天宇 星级评分 created end

        },
        mounted(){
            let screenWidth = document.documentElement.clientWidth;
            let screenHeight = document.documentElement.clientHeight;
            this.wid = '100%';
            this.hei = screenHeight - 200;
            console.log(this.roles,222);
            if(this.roles == 'STUDENT'){
                this.$refs.reportline.toolbars = this.toolbarsMav;
                //获取实验报告
                this.ExperimentalReport();
            }

            var height = $(window).height() -160
            $('.maskleft-ul').css('height',height)
            $('#spaceHeight').css('height',height)
        },
        destroyed(){
            if(this.myVideo){
                this.myVideo.dispose()
            }else if(this.myVideo2){
                this.myVideo2.dispose()
            }


        },
        methods:{
// 王天宇 星级评分 methods
            //评分获取
            getStar(){
                let self = this;
                //url = '/tes/course/'+self.courseId+'/chapter/'+self.singleTaskId+'/resource-online?resourceType=14'
                ///tes/course/课程id/chapter/任务id/info
                self.$http.get('/tes/course/'+ self.courseId + '/chapter/' + self.ChapterId + '/info').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.starValue = res.data.difficultyScore-0;
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
// 王天宇 星级评分 methods end
// 王天宇 实验报告
            //在线点击全屏
            closeFn(){

                $('.maskleft-ul').css('left', '-100%')
                $('.maskleft').css('opacity', '0')
                $('.maskleft').css('display', 'none')
            },
            showFn(){
                let timer;
                clearInterval(timer)
                $('.maskleft').css('opacity', '1')
                $('.maskleft').css('display', 'block')
                timer = setTimeout(()=>{
                     $('.maskleft-ul').css('display', 'block')
                     $('.maskleft-ul').css('left', '0')

                 },300)

            },
            fullLine(type){
                console.log(window.innerHeight-230,123);
                //点击变全屏
                if(type == 1){
                    this.isLineFull = true;
                    this.$nextTick(function(){
                        $(".line-full-box .mavon-editor-con > div").height(window.innerHeight-300);
                    });
                }
                //点击恢复
                else{
                    this.isLineFull = false;
                    this.$nextTick(function(){
                        $(".vir-reportline .mavon-editor-con > div").height(100);
                    });
                }
            },
            // 在线报告提交
            ReportNoteSave(tag,falg){
                // falg 区分提交与保存  0 保存 1 提交
                let self = this
                let data = {}
                if(tag == 1){
                    data = {
                        content: self.$refs.reportline.value,
                        htmlContent: self.$refs.reportline.getRender(),
                        falg: falg
                    }
                }else if(tag == 2){
                    data = {
                        content: self.$refs.reportline.value,
                        htmlContent: self.$refs.reportline.getRender(),
                        falg: falg
                    }
                }
                self.$http.put('/tes/course/'+self.courseId+'/chapter/'+self.ChapterId+'/report',data).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if (falg == 0) {
                            self.$message({
                                message: "保存成功",
                                type: "success"
                            });
                        }else{
                            //临时保存置灰
                            self.onlineCommit = true;
                            self.$message({
                                message: "提交成功，教师未批阅之前您可以反复提交。",
                                // message: "提交成功",
                                type: "success"
                            });
                        }
                        if(tag == 2){
                            self.$refs.reportline.value = self.$refs.reportline.value
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            //下载修改文件名
            downloadModel() {
                let that = this;
                //console.log(that.resQuestionData.modelPath,1111);
                that.$downloadfile.download(that.resQuestionData.modelPath,"实验报告模板.doc")
            },
            // 获取实验报告
            ExperimentalReport() {
                let self = this;
                console.log(self.roles,2);
                self.$http.get('/tes/course/'+self.courseId+'/chapter/'+self.ChapterId+'/report').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.onlineCommit = res.data.onlineCommit;
                        self.ReportUploadForm.fileName = res.data.reportFileName
                        if(self.ReportUploadForm.fileName){
                            self.ReportUploadForm.isUpload = true
                        }
                        self.resQuestionData = res.data

                        self.$nextTick(() => {
                            self.$refs.reportline.changeVal(res.data.reportMd)
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 上传文件
            getReportFile($event) {
                let self = this
                let isLt2M = $event.target.files[0].size / 1024 / 1024 < 500
                let fileType = $event.target.files[0].name
                    fileType = fileType.substring((fileType.lastIndexOf('.') + 1), fileType.length)
                if(!isLt2M){
                    self.$message.error('上传文件大小不能超过 500MB!')
                    return false
                }
                self.ReportUploadForm.fileName = $event.target.files[0]
                self.ReportUploadForm.versionFile = $event.target.files[0].name
            },
            // 上传实验报告弹窗关闭
            ReportUploadClose(){
                let self = this
                self.dialogUpload = false
                self.ReportUploadForm.versionFile = ''
                $('#report-file-upload').val('')
            },
            // 保存上传文件
            ReportUploadSave(form){
                let self = this
                if(self.ReportUploadForm.versionFile == ''){
                    self.$message.error('请上传文件')
                    return
                }
                self.contentLoading = self.$loading({
                    lock: true,
                    text: '文件上传中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                let formData = new FormData()
                    formData.append('file', self.ReportUploadForm.fileName)
				self.$http.post('/tes/course/'+self.courseId+'/chapter/'+self.ChapterId+'/report', formData, {headers: {'Content-Type': 'multipart/form-data'}}).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.$message({
                            message: '文件上传成功',
                            type: 'success'
                        })
                        self.ReportUploadForm.fileName = res.data
                        self.resQuestionData.reportFileName = res.data;
                        self.$refs[form].resetFields()
                        self.ReportUploadForm.isUpload = true
                        self.dialogUpload = false
                        self.contentLoading.close()
                        $('#report-file-upload').val('')
                    }else{
                        self.contentLoading.close()
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
// 王天宇 实验报告 end
            //获取详情数据
            handleChange(val){
                //val 索引
                this.openFlag = val
                let vals = String(val)
                this.openFlag = vals
            },
            //点击伸缩
            // 初始化头部信息
            InitHeaderInfo() {
                let self = this
                self.$http.get('/tes/course/'+self.courseId+'/chapter/'+self.ChapterId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        // 课程名称
                        self.courseName = res.data.courseName
                        // 章节名称
                        self.chapterName = res.data.chapterName
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            //点击步骤
            page(page){
                let self = this
                if(self.myVideo2 ){
                    self.myVideo2.pause()
                }
                //关闭批注弹窗
                $('#onlyDialog').hide()
                 if( page == 1){
                    if(self.stepListIndex == (self.stepList.length - 1)){
                        this.roles == 'STUDENT' && self.classId?   self.videoCount() : ''
                        self.stepListIndex = 0
                        self.stepChapterId = self.stepList[self.stepListIndex].stepChapterId
                        self.manyStep(self.stepChapterId)
                    }else{
                        this.roles == 'STUDENT' && self.classId?   self.videoCount() : ''
                        self.stepListIndex = self.stepListIndex + 1
                        self.stepChapterId = self.stepList[self.stepListIndex].stepChapterId
                        self.manyStep(self.stepChapterId)
                    }
                 }else if( page == -1 ){
                    if(self.stepListIndex == 0){
                        self.stepListIndex = self.stepList.length - 1
                        self.stepChapterId = self.stepList[self.stepListIndex].stepChapterId
                        self.manyStep(self.stepChapterId)

                    }else{
                        self.stepListIndex = self.stepListIndex - 1
                        self.stepChapterId = self.stepList[self.stepListIndex].stepChapterId
                        self.manyStep(self.stepChapterId)
                    }
                }
            },

             //小天发消息
            onmessages() {
                let hostname = window.location.host
                var target = "ws://"+hostname+"/tes/ws/experiment/course/videotime/"+this.single
                this.websock2 = new WebSocket(target);
                //this.websock2.onopen = this.websocketonopen2;
                //this.websock2.onclose = this.websocketclose;
                this.over = () => {
                    this.websock2.close()
                }

            },
             websocketclose(e){  //关闭
                 console.log('断开连接',e);
            },
            websocketonopen2(){
                let actions
                if(this.stepTypeStr != '多步骤实验'){
                    actions = {
                        videoTime:this.videocurrentTime,
                        chapterId :this.single,
                        classId:this.classId,
                        taskId: this.ChapterId,
                        courseId:this.courseId,
                        sumTime:this.videoAll,
                        isPlay:this.isPlay

                    };
                }else if(this.stepTypeStr == '多步骤实验'){
                     actions = {
                        videoTime:this.videocurrentTime,
                        chapterId :this.single,
                        classId:this.classId,
                        stepId: this.stepChapterId,
                        taskId: this.ChapterId,
                        courseId:this.courseId,
                        sumTime:this.videoAll,
                        isPlay:this.isPlay
                    };
                }

                //请根据实际项目需要进行修改
                if(this.websock2.readyState===1 ){
                     this.websocketsend(JSON.stringify(actions));
                }

            },

            websocketsend(Data){//数据发送
                this.websock2.send(Data);
            },
             //向后台传递视频时间和 总时间
            videoCount(){
                let self = this

                if(self.myVideo2 && this.stepTypeStr == '多步骤实验'){
                    self.videocurrentTime = self.myVideo2.currentTime()
                    //self.videocurrentTime = self.videocurrentTime.toFixed(1)
                    self.videoAll = self.myVideo2.duration()
                    self.videoAll = self.videoAll.toFixed(1)
                    videojs.log( self.videocurrentTime,'视频播放多少!')
                    videojs.log( self.videoAll,'视频总时间!')
                }
                if(self.myVideo && this.stepTypeStr != '多步骤实验'){
                    self.videocurrentTime = self.myVideo.currentTime()
                    //self.videocurrentTime = self.videocurrentTime.toFixed(1)
                    self.videoAll = self.myVideo.duration()
                    self.videoAll = self.videoAll.toFixed(1)
                    videojs.log( self.videocurrentTime,'视频播放多少!')
                    videojs.log( self.videoAll,'视频总时间!')
                }
                if(self.videocurrentTime >= 0.1 && !self.videostatus){
                    self.$http.put('/tes/course/'+self.courseId+'/chapter/' +self.single+ '/statistics/' +self.classId+ '/experimentVideo?videotime='+self.videocurrentTime +'&stepId='+self.stepChapterId + '&sumTime='+self.videoAll+'&taskId= '+self.ChapterId).then(response => {
                        let res = response.data
                        if(res.code == '200'){
                        }else{
                            self.$message.error(res.message)
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                }

            },
            //判断视频是否播放完
            isvideoFinish(){
                let self = this
                if(self.stepChapterId == undefined){
                    self.stepChapterId = ''
                }
                self.$http.get('/tes/course/'+self.courseId+'/chapter/' +self.ChapterId+ '/statistics/' +self.classId+ '/experimentVideoFind?stepId='+self.stepChapterId + '&taskId= '+self.single).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        //0 没播  1 播完
                        self.videostatus = res.data == 0? false : true
                        console.log(res.data,8988)
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            //新加入获取步骤
             getlist(){
                let self = this
                // self.$http.get('/tes/course/chapter/'+self.ChapterId+'/step/list').then(response => {
                steep(self.ChapterId).then(response => {
                    let { code,data } = response
                    if( code == '200'){
                        if(data.length >0){
                            self.stepList = data
                            self.stepChapterId  = self.stepList[0].stepChapterId
                            self.manyStep(self.stepChapterId)
                        }else{
                            self.manyStep('')
                        }
                        if(self.roles == 'STUDENT' && this.stepTypeStr == '多步骤实验'){
                            if(self.classId){
                                self.isvideoFinish()
                            }
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //多步骤获取资源
            manyStep(stepChapterId){
                let self =this
                self.experimentVideoData2 = ''
                self.$http.get('/tes/course/'+self.courseId+'/chapter/'+self.ChapterId+'/detail/resource?type=5&stepChapterId='+stepChapterId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        //视频
                        if(res.data.experimentVideo != undefined &&  res.data.experimentVideo.displayVersion.length > 0 && res.data.experimentVideo.displayVersion[0].filePath != undefined && res.data.experimentVideo.displayVersion[0].filePath != '' ){
                             //self.experimentVideoData2 = 'https://www.runoob.com/try/demo_source/movie.mp4'
                            // self.experimentVideoData2 = res.data.experimentVideo.displayVersion[0].filePath
                            self.experimentVideoData2 = res.data.experimentVideo.displayVersion[0].filePath;

                            self.$nextTick(()=>{
                                $('#videoStep').css('display','block');
                                // self.myVideo2.dispose && self.myVideo2.dispose();
                                if (!self.myVideo2) {
                                    self.myVideo2 = videojs(this.$refs.videoStep, {
                                        bigPlayButton: true,
                                        textTrackDisplay: false,
                                        posterImage: true,
                                        errorDisplay: false,
                                        controls :true,
                                        preload: "auto",
                                        sources: [{
                                            type: 'video/mp4',
                                            src: self.experimentVideoData2
                                        }],
                                        height: 500,
                                        playbackRates: [0.5,1,1.5,2,3], // 倍速播放配置
                                    },function (){
                                        if(self.roles == 'STUDENT'){
                                            //视频总时长
                                            videojs.log(this.duration(),'视频总时间!')
                                            self.videoAll = this.duration()
                                            self.videoAll = self.videoAll.toFixed(1)
                                            this.on('pause', function () {
                                                //暂停获得秒数
                                                self.videocurrentTime = this.currentTime()
                                                self.isPlay = '0'
                                                if(!self.videostatus){
                                                    self.websocketonopen2()
                                                }
                                            // videojs.log(self.videocurrentTime,'2222!')

                                            });
                                            this.on('ended', function () { //视频播放完毕触发
                                            //  videojs.log(this.currentTime(),'11111!')
                                                //视频播放完毕获得秒数
                                                self.videocurrentTime = this.currentTime()
                                                // $('.vjs-progress-holder').css('opacity', '1')

                                            });
                                            this.on('play', function () { //视频播放
                                                self.videocurrentTime = this.currentTime()
                                                self.videoAll = this.duration()
                                                self.videoAll = self.videoAll.toFixed(1)
                                                self.isPlay = '1'
                                                if(!self.videostatus){
                                                    self.websocketonopen2()
                                                }
                                            });
                                        }

                                    })
                                } else {
                                    self.myVideo2.src(self.experimentVideoData2);
                                    self.myVideo2.load(self.experimentVideoData2);
                                }
                            })
                        }else{
                           self.experimentVideoData2 = ''

                        }
                        //目标
                        if(res.data.laboratoryTarget != undefined &&  res.data.laboratoryTarget.displayVersion.length > 0 &&  res.data.laboratoryTarget.displayVersion[0].htmlContent != undefined  && res.data.laboratoryTarget.displayVersion[0].htmlContent != ''){
                             self.expeimenttarget = res.data.laboratoryTarget.displayVersion[0].htmlContent

                        }else{
                             self.expeimenttarget = ''
                        }

                        //手册
                        if(res.data.laboratoryManual != undefined && res.data.laboratoryManual.displayVersion.length > 0 && res.data.laboratoryManual.displayVersion[0].htmlContent != undefined  && res.data.laboratoryManual.displayVersion[0].htmlContent != ''){
                            self.experimentreport = res.data.laboratoryManual.displayVersion[0].htmlContent
                        }else{
                            self.experimentreport = ''
                        }
                        self.$nextTick(() => {
                            $('.markdown-body p img').on('click', function(){
                                self.biggerImgPath = $(this).attr('src')
                                self.bigger = true
                            })
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            // 单步骤初始化获取资源
            InitGetResource() {
                let self = this
                self.$http.get('/tes/course/'+self.courseId+'/chapter/'+self.ChapterId+'/detail/resource?type=5').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        //判断是 多步骤 还是 单步骤
                        if(self.stepTypeStr != '多步骤实验'){
                            if (res.data.laboratoryManual.displayVersion.length > 0 && res.data.laboratoryManual.displayVersion[0].htmlContent) {
                                self.displayVersion = res.data.laboratoryManual.displayVersion[0].htmlContent

                            }
                        }

                        //视频
                        if (res.data.experimentVideo.displayVersion.length > 0 && res.data.experimentVideo.displayVersion[0].filePath) {
                            self.videoUrlCopy = res.data.experimentVideo.displayVersion[0].filePath
                            // self.videoUrlCopy =  'https://www.runoob.com/try/demo_source/movie.mp4'

                        }

                        // 实验目标
                        if (res.data.laboratoryTarget.displayVersion.length > 0  && res.data.laboratoryTarget.displayVersion[0].htmlContent) {
                            self.laboratoryTarget = res.data.laboratoryTarget.displayVersion[0].htmlContent

                        }

                        //学生端
                        if(this.roles == 'STUDENT'){
                            //有视频增加高度
                            if(this.videoUrlCopy != '' && this.stepTypeStr != '多步骤实验'){
                                $("#jx-contain .sideBox2").css('top',350);
                            }
                        }
                        self.$nextTick(() => {
                            $('.markdown-body p img').on('click', function(){
                                self.biggerImgPath = $(this).attr('src')
                                self.bigger = true
                            })
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 打开笔记获取笔记信息
            openNoteWindow(){
                let self = this
                self.$http.get('/tes/course/'+self.courseId+'/chapter/'+self.ChapterId+'/resource/notes?notesType=3&pageNumber=1').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.noteVal = res.data

                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
                $("#onlyDialog").show()
                $('.detailBox').hide()
            },
            // 关闭笔记
            closeNoteWindow(){
                $("#onlyDialog").hide();
            },
            // 学习笔记保存
            NoteSave(){
                let self = this
                self.$http.post('/tes/course/'+self.courseId+'/chapter/'+self.ChapterId+'/resource/notes',{
                    notesType: 3,
                    pageNumber: 1,
                    content: self.noteVal   //self.$refs.question.value  去掉编辑器改成普通textarea
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            message: '保存成功',
                            type: 'success'
                        })
                        $("#onlyDialog").hide()
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 视频弹窗
            videoDialog(){
                let self = this
                //self.videoUrl = self.videoUrlCopy
                 self.dialogVisible2 = true

                 self.InitGetResource()
                 if(self.roles == 'STUDENT'){
                     this.$nextTick(()=>{
                        self.myVideo = videojs('video', {
                        bigPlayButton: true,
                        textTrackDisplay: false,
                        posterImage: false,
                        errorDisplay: false,
                        controls :true,
                        height: 400,
                        width: 400,
                        playbackRates: [0.5,1,1.5,2,3], // 倍速播放配置
                    },function onPlayerReady(){
                        //视频总时长
                        videojs.log(this.duration(),'视频总时间!')
                        self.videoAll = this.duration()
                        self.videoAll = self.videoAll.toFixed(1)
                        this.on('pause', function () {
                            //暂停获得秒数
                            self.videocurrentTime = this.currentTime()
                            self.isPlay = '0'


                            if(!self.videostatus){
                                self.websocketonopen2()
                            }
                        // videojs.log(self.videocurrentTime,'2222!')

                        });
                        this.on('ended', function () { //视频播放完毕触发
                        //  videojs.log(this.currentTime(),'11111!')
                            //视频播放完毕获得秒数
                            self.videocurrentTime = this.currentTime()
                            // $('.vjs-progress-holder').css('opacity', '1')

                        });
                        this.on('play', function () { //视频播放
                            self.videocurrentTime = this.currentTime()
                            self.videoAll = this.duration()
                            self.videoAll = self.videoAll.toFixed(1)
                            self.isPlay = '1'
                            if(!self.videostatus){
                                self.websocketonopen2()
                            }
                        });


                    })
                        self.myVideo.src(self.videoUrlCopy)
                        self.myVideo.load(self.videoUrlCopy)
                    })
                 }else{
                     this.$nextTick(()=>{
                        self.myVideo = videojs('video', {
                        bigPlayButton: true,
                        textTrackDisplay: false,
                        posterImage: false,
                        errorDisplay: false,
                        controls :true,
                        height: 400,
                        width: 400,

                        playbackRates: [0.5,1,1.5,2,3], // 倍速播放配置
                    })
                        self.myVideo.src(self.videoUrlCopy)
                        self.myVideo.load(self.videoUrlCopy)
                    })
                }

            },
            // 关闭视频弹窗
            closeVideoDialog() {
                let self = this
                self.$nextTick(()=>{
                    //   var myVideo = videojs('video')
                    //   myVideo.pause();
                    self.myVideo.pause()

                })

            },
            // 批注清除内容
            clearContent() {
                let self = this
                if(self.noteVal.length == 0){
                    return
                }

                self.noteVal = ''
            },
            //专科版本中人添加详情
            //初始化详情列表
            DetailData(){
                let self = this
                self.$http.get('/tes/course/'+self.courseId+'/chapter/list').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.appList = res.data
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            //点击关闭
            deleteFns(){
                $('.detailBox').hide()
            },
            //点击详情
            detalList(){
                let self = this
                let IndexValue;
                for(let i =0; i< self.appList.length; i++){
                    if(self.appList[i].chapterIds.includes(Number(self.ChapterId))){
                        IndexValue = i
                    }
                }
                // for(let i =0; i< this.appList.length; i++){
                //     if(this.appList[i].recentlyStudiedFlag == 1){
                //         IndexValue = i
                //     }
                // }
                this.activeName = IndexValue
                //最近学习索引等于打开这项
                this.openFlag = IndexValue
                this.scrollFn(790)
                //判断屏幕分辨率
                if(window.screen.height <= 900){
                    this.scrollFn(540)
                }
                $('.detailBox').stop().slideToggle()
                //批注隐藏
                $('.NotesBox').hide()
            },
            //进入详情
            EnteDetails(item,itembig,items){
                let self = this
               self.singleTask =  item.chapterId

               //self.stepTypeStr = ''
                if(itembig.levels == 2 ){
                    self.stepType = itembig.stepTypeStr
                }else if( itembig.levels == 3){
                    self.stepType = items.stepTypeStr
                }
                //如果为真，可以跳转
                if(item.show){
                    if(item.name == '理论学习' || item.name == '任务引导'){
                        self.$router.push({
                            path:'/Teaching/MyCourses/CoursewareDetail',
                            query:{
                                courseId: self.courseId,
                                chapterId: item.id,
                                classId:self.classId,
                                singleChaper:item.id,
                            }
                        })
                    }else if(item.name == '教学资源'){
                        self.$router.push({
                            path:'/Teaching/MyCourses/CourseResourceDetail',
                            query:{
                                courseId: self.courseId,
                                chapterId: item.id,
                                classId:self.classId,
                                singleChaper:item.id,
                            }
                        })
                    }else if(item.name == '备课材料'){

                        self.$router.push({
                            path:'/Teaching/MyCourses/CourseMaterialDetail',
                            query:{
                                courseId: self.courseId,
                                chapterId: item.id,
                                classId:self.classId,
                                singleChaper:item.id,
                            }
                        })
                    }else if(item.name == '实验学习' ||  item.experimentCourseFlag){
                        if(self.userStatus == 'NOT_CREATE_CLASS'){
                            self.$router.push({
                                path:'/Teaching/MyCourses/VirtualMachineManual',
                                query:{
                                    courseId: self.courseId,
                                    chapterId: item.id,
                                    classId:self.classId,
                                    stepTypeStr: self.stepType,
                                    singleChaper:self.singleTask

                                }
                            })
                            window.location.reload()
                        }else if(self.userStatus == 'EXIST_CLASS'){
                            self.clickId = item.id
                            self.$http.get('/tes/image-allocation/course/'+self.courseId+'/'+item.id).then(response => {
                            let res = response.data
                              if(res.data.allocated){

                                self.$http.get('/tes/experiment/course/'+item.id+'/prompt').then(response => {
                                    let res = response.data
                                    if(res.code == '200'){
                                        if(res.data){
                                            // 弹窗是否强制跳转
                                            self.dialogVirtual = true
                                        }else{
                                            if (self.roles == 'TEACHER' || self.roles == 'MARKET_TEACHER' || self.roles == 'UNIVERSITY_TEACHER') {
                                                // 跳转实验页
                                                self.$router.push({
                                                    path: "/Teaching/MyCourses/VirtualMachine",
                                                    query: {
                                                        courseId: self.courseId,
                                                        chapterId: item.id,
                                                        classId:self.classId,
                                                        stepTypeStr: self.stepType,
                                                        singleChaper:self.singleTask
                                                    }
                                                })
                                            }else if(self.roles == 'STUDENT'){
                                                // 跳转实验页
                                                self.$router.push({
                                                    path: "/Teaching/MyCourses/STVirtualMachine",
                                                    query: {
                                                        courseId: self.courseId,
                                                        chapterId: item.id,
                                                        classId:self.classId,
                                                        stepTypeStr: self.stepType,
                                                        singleChaper:self.singleTask
                                                    }
                                                })
                                            }
                                        }
                                    }else{
                                        self.$message.error(res.message)
                                    }
                                }).catch(err => {
                                    console.log(err)
                                })
                            }else{
                                self.$router.push({
                                    path: '/Teaching/MyCourses/VirtualMachineManual',
                                    query: {
                                        courseId: self.courseId,
                                        chapterId: item.id,
                                        classId:self.classId,
                                        stepTypeStr: self.stepType,
                                        singleChaper:self.singleTask

                                    }
                                })
                                window.location.reload()
                            }
                        }).catch(err => {
                            console.log(err)
                        })
                        }
                    }else if(item.name == '随堂练习'){
                        //分为学生和老师身份
                        if(self.roles == 'STUDENT'){
                            if(self.userStatus=='NOT_CREATE_CLASS'){
                                self.typesStatus = 1   //没有班级时传1  不显示提交按钮
                            }else{
                                self.typesStatus = 2  //有班级时传2 显示提交按钮
                            }
                            self.$router.push({
                                path: "SPractice",
                                query: {
                                    courseId: self.courseId,
                                    chapterId: item.id,
                                    typesStatus:self.typesStatus,
                                    classId:self.classId,
                                    singleChaper:item.id,
                                }
                            })
                        }else if(self.roles == 'TEACHER' || self.roles == 'MARKET_TEACHER' || self.roles == 'UNIVERSITY_TEACHER'){
                            self.$router.push({
                                path: "TPractice",
                                query: {
                                    courseId: self.courseId,
                                    chapterId: item.id,
                                    classId:self.classId,
                                    singleChaper:item.id,
                                }
                            })
                        }

                    }

                }

            },
            // 确定跳转实验详情
            VirtualSave(){
                let self = this
                if(self.roles == 'TEACHER' || self.roles == 'MARKET_TEACHER' || self.roles == 'UNIVERSITY_TEACHER'){
                    // 跳转实验页
                     self.$router.push({
                        path: "/Teaching/MyCourses/VirtualMachine",
                        query: {
                            courseId: self.courseId,
                            chapterId: self.clickId,
                            classId:self.classId,
                             stepTypeStr: self.stepType,
                             singleChaper : self.singleTask,
                        }
                    })
                }else if(self.roles == 'STUDENT'){
                     self.$router.push({
                        path: "/Teaching/MyCourses/STVirtualMachine",
                        query: {
                            courseId: self.courseId,
                            chapterId: self.clickId,
                            classId:self.classId,
                             stepTypeStr: self.stepType,
                            singleChaper : self.singleTask,
                        }
                    })
                }
                self.dialogVirtual = false
            },
            //自动到最近学习
            scrollFn(n){
                // setTimeout(()=>{
                //     $(".detailBox").animate({scrollTop:$('.studying').parent().offset().top})
                // },10)
                this.$nextTick(()=>{
                    let topValue = $('.studying').parent().offset().top
                    console.log(topValue,7878)
                    if(topValue > n){
                        $(".detailBox").animate({scrollTop:$('.studying').parent().offset().top-100},20)
                    }

                })
            },
            // 判断是否添加过班级
            ClassInit() {
                let self = this
                self.$http.get('/tes/course/'+self.courseId+'/user-status').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.userStatus = res.data
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
        },
    }
</script>
<style scoped>
    /* 滚动条样式 */
    #spaceHeight{
        overflow-y: scroll;
    }
    #spaceHeight::-webkit-scrollbar { /*滚动条整体样式*/
        width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }

    #spaceHeight::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #ccc;/*滚动条颜色*/
    }

    #spaceHeight::-webkit-scrollbar-track { /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        background: #EDEDED;
    }
   .video-js{
        width: 100%;
        height: 450px;
    }
    .courseName2{
        position: relative;
    }


    .courseName2 .icon-lock{
        position: absolute;
        right: -6px;
        top: 3px;
    }

    .el-collapse-item__header .collapsTitle2 .icon-lock{
        position: absolute;
        right: 11px;
        top: 3px;
    }
    .dialog-virtual>>>.el-dialog__footer{
        text-align: center;
    }
    .blocks::-webkit-scrollbar{
        width: 5px;
        height: 5px;
    }
    .blocks::-webkit-scrollbar-thumb {
        background: #4a4a4a;
        border-radius:50px;
    }
    .blocks{
        overflow-y: scroll;
        max-height: 760px;
    }

    .el-collapse{
        border:none;
    }
    .el-collapse-item>>>.el-collapse-item__header{
        background: #2d3136;
        color: #fff;
        border-bottom:none;
        text-align: center;
        position:relative
    }
    .el-collapse-item>>>.el-icon-arrow-right{
        display: none;
    }
    .el-collapse-item>>>.el-collapse-item__content{
        background: #26292c;
        color: #a2a3a4;
        padding: 5px 20px;

    }
    .el-collapse-item__content>div{
        padding: 4px 0;
    }
    .el-collapse-item>>>.el-collapse-item__wrap{
        border-bottom:none;
    }
    .questionNote>>>.v-note-wrapper{
       height: 400px;
   }
    .el-dialog__wrapper>>>.el-dialog__footer{
        text-align: center;
    }
    .cewnyers{
        width: 1120px;
        background: #fff;
        margin: 0 auto;
        margin-top: -57px;
        padding: 30px 40px;
    }
    .bigger-dialog>>>.el-dialog{
         width: min-content;
    }
    .bigger-dialog >>>.el-dialog__header{
        display: none;
    }

    .bigger-dialog >>> .el-dialog__body{
        padding: 0;
        background: transparent;
        text-align: center;
    }
    .bigger-dialog>>> img{
        width: 1200px;
    }


</style>
<style lang="scss" scoped>
    #main{
        .v-note-wrapper{
                z-index: 1
        }
    }
    .el-dialog__wrapper{
        box-shadow:1px 1px 20px rgba(0,0,0,0.2);
    }
    #onlyDialog{
        .el-dialog{
            .el-dialog__footer{
                text-align: center;
            }
        }
    }

</style>

<style scoped lang="scss">

 @import "./../../../styles/ypublic.scss";
 .markdown-body{
     width: auto;
 }
 .manySteep{
     background: #fff;
     height: 57px;
     border-bottom: 1px solid #e9ecef;
     line-height: 57px;
     overflow: hidden;
    position: sticky;
    z-index: 999;
    top: 60px;
     .manySteep-right{
         float: right;
     }
     .manySteep-left{
         float: left;
         .titlesteep{
            font-size: 16px;
            margin-left: 12px;
            max-width: 800px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: inline-block;

        }
         i{
             cursor: pointer;
             vertical-align:text-bottom
         }
     }
     .manySteep-center{
         width: 1200px;
         margin: 0 auto;
     }
 }
 .maskleft{
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    width: 100%;
    height: 100%;
    display: none;
    position: fixed;
    top: 120px;
    z-index: 999;


 }
  .maskleft-ul{
        width: 250px;
        background: #fff;
        z-index: 999;
        display: none;
        position: fixed;

        left:0;
        top: 120px;
        transition: left .4s;
        -moz-transition: left .4s;
        -webkit-transition: left .4s;
        clear: both;
        padding: 20px 10px;
        li{
            line-height: 50px;
            height: 50px;
            padding-left: 10px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
 .maskleft-ul .activeSteep{
        color: #1277eb;
    }
 .preview-top {
    height: 60px;
    margin: 0 auto;


    .preview-top1 {
        width: 100%;
        height: 60px;
        line-height: 60px;
        background: #101937;
        position: fixed;
        top: 0;
        color: #fff;
        z-index: 99;
        font-size: 14px;
        .preview-top-content {
            width:1200px;
            margin:0 auto;
            span{
                margin-right:40px;
            }
            .preview-title {
                font-size: 18px;
                margin-right:0;
            }
            .preview-line{
                margin:0 6px;
            }
        }
    }
    .preview-top2 {
        width: 100%;
        height: 60px;
        line-height: 60px;
        position: fixed;
        top: 80px;
        padding:0;
        font-size: 14px;
        .preview-top-content{
            width:1200px;
            margin:0 auto;
            padding:0 40px;
            .button-style{
                margin-left:20px;
            }
        }
    }
}
// 笔记盒子 提问盒子
    #onlyDialog{
        width: 490px;
        position: fixed;
        left: initial;
        top: 150px;
        bottom: initial;
        right: 95px;
        display: none;
        z-index: 1;
        overflow: hidden;
    }
    #issueDialog{
        width: 410px;
        position: absolute;
        left: initial;
        top: 210px;
        bottom: initial;
        right: 95px;

    }
    #onlyDialog .el-dialog,#issueDialog  .el-dialog{
        border-radius: 5px;
        margin: 0!important;
        padding: 0;
        height: 100%;

    .el-dialog__header {
        background: $white;

        height: auto;
        line-height:initial;
        padding: 20px 20px 10px;

        .el-dialog__title {
            color: #070e28;
            line-height: 24px;
            font-size: 16px;
            float: left;
        }
    }

    .el-dialog__headerbtn {
        top: 20px;

        .el-dialog__close {
            color: #070e28;

            &:hover {
                color: #070e28;
            }
        }
    }
    #noteVal{
        overflow: auto;
    }
}
    //主体
    #jx-contain{
        position: relative;
         // 图片放大

        .jx-content{
            margin-top: 40px;
        }
        .sideBox{
            position: fixed;
            top: 130px;
            right: 25px;
            width: 60px;
            max-height: 240px;
            background: #1c1f21;
            color: #fff;
            text-align: center;
            border-radius: 5px;
            z-index: 9;
            .sideBoxActive{
                color: #6d6d6d;
                pointer-events: none;
                cursor: default;
                opacity: 0.6;
                .iconfont{
                    display: block;
                    margin-bottom: 8px;
                    font-size: 19px;
                    color: #6d6d6d;
                }
            }
            li{
                height: 36px;
                width: 25px;
                display: block;
                font-size: 12px;
                margin: 30px auto 38px;
                position: relative;
                cursor: pointer;
                color: #dfe0e0;
                .iconfont{
                    display: block;
                   // margin-bottom: 8px;
                    font-size: 19px;

                }
                &:hover{
                    color: #fff;
                }

            }

        }
        .sideBox2{
            top:290px;
        }
        // 暂无数据
        .no-data-tips{
            padding-top: 10%;
            text-align: center;
             &>p{
                margin: 30px 0;
                color: #9999;
                font-size: 16px
            }
        }
    }
     // 二期需求
    .el-annotation, .el-notes{
        .button-style{
            &.clear{
                color: #bbbbbb;
                border: 1px solid #bbbbbb;
                &:hover{
                    color: #bbbbbb;
                    border: 1px solid #bbbbbb;
                    background: #fff;
                }
                &.active{
                    color: #1277eb;
                    border: 1px solid #1277eb;
                    &:hover{
                        background: #1277eb;
                        color: #fff;
                    }
                }
            }
        }
    }

    //专科版本需求
    //详情盒子
    .detailBox{
        width: 400px;
        position: fixed;
        top: 133px;
        bottom: initial;
        right: 95px;
        background: #26292c;
        max-height: 760px;
        border-radius:4px;
        display: none;
        z-index: 9;
        .chapterList-top{
            overflow: hidden;
            height: 50px;
            line-height: 50px;
            padding: 0 18px;
            &>p{
                line-height: 50px;
                color: #a2a3a4;
            }
            i{
                color: #a2a3a4;
                &:hover{
                    color: #fff;
                    cursor: pointer;
                }
            }
        }
        .infoName{
            display: inline-block;
             &:hover{
               span{color: #1374e4;}
               .crile{
                    background: #1374e4;
                }
            }
        }
        .icon-diannao-copy{
            font-size: 14px;
            margin-left: 8px;
            color: #1374e4;
            vertical-align:super
        }
        .courseName{
            margin: 5px 0;
            cursor: pointer;
            &:hover{
                color: #fff;

            }
            .icon-tubiaozhizuomoban1{
                color: #1374e4;
                font-size: 16px;
            }
        }
    }
    .collapsTitle{
        text-align: left;
        // margin: 0 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-left: 22px;
        color: #a2a3a4;
        .collapsTitle_span{
            max-width: 270px;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 13px;
        }
        .icon-chaibaoguoqujian{
            color: #a2a3a4;
            font-size: 14px;
        }
        &:hover{
            color: #fff;
            .icon-chaibaoguoqujian{
                 color: #fff;
            }
        }
        .icon-tubiaozhizuomoban1{
            color: #1374e4;
            font-size: 16px;
        }
    }
    .collapsTitle2{
        text-align: left;
        // margin: 0 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-left: 22px;
        color: #a2a3a4;
        .collapsTitle_span{
            max-width: 270px;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 13px;
        }
        .icon-chaibaoguoqujian{
            color: #a2a3a4;
            font-size: 14px;
        }
        &:hover{
            color: #fff;
            .icon-chaibaoguoqujian{
                 color: #fff;
            }
        }
        .icon-tubiaozhizuomoban1{
            color: #1374e4;
            font-size: 16px;
        }
    }
    .icon-shijian00{
        color: #1374e4;
        margin-left: 5px
    }

    .crile{
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #a2a3a4;
        display: inline-block;
        margin-right: 10px;
        margin-bottom: 9px;

    }
    .studying{
       color: #1374e4;
    }
    .crileBg{
        background: #1374e4;
    }
    .detailbox{
        padding:2px 0 2px 15px;
        cursor: pointer;
        &:hover{
            color: #1374e4;
            .crile{
                background: #1374e4
            }
        }
    }
    .Tiltlefiles{
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 210px;
        cursor: pointer;
    }

    .dialog-content{
        p{
            font-size: 14px;
            text-align: center;
            line-height: 38px;
            i{
                font-size: 18px;
                margin-right: 10px;
                color: #1277eb;
            }
        }
        .handbook-item{
            text-align: center;
            margin-top: 30px;
        }
    }
     .el-dialog__footer{
        .dialog-footer{
            .el-button {
                width: 90px;
            }
        }
    }
    .icon-42{
        font-size: 12px;
        vertical-align: text-bottom;
        margin-left: -2px;
        margin-right: 5px;
    }
    .dialogList{
        .dialog-content{
            text-align: center;
            i{
            font-size: 50px;
                color: #d6d6d6;
                display: block;
                margin-top: 25px;
            }
            p{
                font-size: 14px;
                text-align: center;
                line-height: 18px;

            }
            .handbook-item{
                text-align: center;
                margin-top: 30px;
            }
        }
    }
</style>

<!-- 王天宇 实验报告  -->
<style lang="scss">
    #report-file-upload{
        position: absolute;
        width: 100px;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: #cc281a;
        opacity: 0;
    }
    .vir-report{
        width:600px;
        background:#fff;
        box-shadow: 0 0 20px rgba(74,74,74,.25882352941176473);
        border-radius: 5px;
        position:fixed;
        right:100px;
        transform: translateY(-150px);
        .vir-report-header{
            position: relative;
            color: #474747;
            font-size: 16px;
            height:40px;
            line-height: 40px;
            padding:0 20px;
            text-align: left;
            .model-download{
                cursor: pointer;
                position: absolute;
                right:60px;
                font-size: 14px;
                color:#1277eb;
            }
            .el-dialog__headerbtn{
                top:12px;
                i{
                    color:#474747;
                }
            }
        }
        .vir-report-main{
            text-align: center;
            padding:50px 0 100px;
            color:#474747;
        }
    }
    .vir-reportline{
        width:600px;
        background:#fff;
        box-shadow: 0 0 20px rgba(74,74,74,.25882352941176473);
        border-radius: 5px;
        position:fixed;
        right:100px;
        color:#474747;
        transform: translateY(-150px);
        .vir-reportline-header{
            position: relative;
            color: #474747;
            font-size: 16px;
            height:40px;
            line-height: 40px;
            padding:0 20px;
            text-align: left;
            .el-dialog__headerbtn{
                top:12px;
                i{
                    color:#474747;
                }
            }
            .line-full{
                position: absolute;
                top:0;
                right:50px;
                cursor: pointer;
                color: #385899;
            }
        }
        .vir-reportline-main{
            padding:0 15px;
            .mavon-editor-con > div{
                height:100px;
                box-shadow: none!important;
            }
        }
        .vir-reportline-footer{
            padding:20px 0;
        }
    }
    .vir-reportline.line-full-box{
        top:128px;
        transform: translateY(0px);
    }
</style>
<!-- 王天宇 实验报告 end -->
<!-- 王天宇 星级评分 css -->
<style lang="scss">
    .vmm-star-box{
        margin-left:40px;
        display:flex;
        align-items: center;
    }
</style>
<!-- 王天宇 星级评分 css end -->
